<template>
  <div>
    <h1>欢迎来到黄师傅的第一个页面</h1>

    <NuxtLink to="/list">进入列表页</NuxtLink>
  </div>
  <div>
    <strong> 姓名：{{ userInfo.userName }} 性别：{{ userInfo.sex }} </strong>
    <div>pos: {{ x }}, {{ y }}</div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores'
const userInfo = useUserStore().userInfo
const foo = useFoo()
console.log(foo)
const { x, y } = useMouse()

// 内置常用
// app全局配置

const appConfig = useAppConfig()
console.log(appConfig)

// 访问异步
// const { data, pending, error, refresh } = await useAsyncData('mountains', () =>
//   $fetch('https://api.nuxtjs.dev/mountains')
// )

// useFetch是对useAsyncData包装，自动生成key同时推断响应类型，用起来更简单
// const param1 = ref('value1')
// const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
//     query: { param1, param2: 'value2' }
// })

// const router = useRouter();
// router.back();
// router.forward();
// router.go();
// router.push({ path: "/home" });
// router.replace({ hash: "#bio" });
</script>

<style lang="scss">
body {
  background-color: $bgColor;
  color: $theme;
}
</style>
